<!DOCTYPE html>
<html>
  <head>
    <title>Test 2.1 for role button</title>
    <link rel='stylesheet' href='../css/aria_tests.css' type='text/css' media='all'>
    <script src='../js/aria_constants.js' type='text/javascript'></script>
    <link rel='stylesheet' href='../css/aria_button.css' type='text/css' media='all'>
    <script type='text/javascript'>
      function setFocus() { 
        node = document.getElementById('test');
        node.focus();
      } // end onload function 
    </script>
    <script src='../js/jquery.js'            type='text/javascript'></script>
    <script src='../js/aria_tests.js'        type='text/javascript'></script>
    <script src='../js/show_test_results.js' type='text/javascript'></script>
    <script src='results_button_002_001.js' type='text/javascript'></script>
  </head>
  <body id='test_002_001' onload='setFocus()'>
    <div class='nav'>
      <ul role='navigation' aria-label='button test navigation'>
        <li><a href='../index.html'>All Tests</a></li>
        <li><a href='index.html'>button Tests</a></li>
      </ul>
    </div>
    <h1>Test 2.1 for role button</h1>
    <p>Test ID: test_002_001</p>
    <p class='description'><strong>Description: </strong>Simple button that aria-pressed is true and uses child node for accessible name</p>
    <div id='test' tabindex='0'
      role='button'
      aria-pressed='true'
      >
      Button label
    </div>
      <h2>Accessible Name</h2>
        <p><a href='http://www.w3.org/TR/wai-aria/roles#namecalculation'>Information on accessible name calculation</a>.</p>
        <p class='name'><strong>Calculated Accesible Name: </strong><span>Button label</span></p>
        <table class='name' border='1px' summary='Sources of Accessible Name for Widget'>
          <caption>Sources of Accessible Name for Widget</caption>
          <thead>
            <tr>
              <th>Source</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Child node text content</th>
              <td>Button label</td>
            </tr>
          </tbody>
        </table>
    <h2>Accessibility API Mappings</h2>
    <table class='api' border='1px' summary='Accessibility API Mappings'>
      <caption>Accessibility API Mappings</caption>
      <thead>
        <th>Value</th>
        <th>MSAA</th>
        <th>IAccessible2</th>
        <th>UIA</th>
        <th>ATK</th>
        <th>MAC</th>
      </thead>
      <tbody>
        <tr>
          <th>
            Role=button
          </th>
          <td>
            <ul>
            <li>ROLE_SYSTEM_PUSHBUTTON. If aria-haspopup='true' it SHOULD be exposed as a ROLE_SYSTEM_BUTTONMENU
            </ul>
          </td>
          <td>
            <ul>
            <li>If aria-pressed is not undefined, it SHOULD be exposed as IA2_ROLE_TOGGLE_BUTTON
            </ul>
          </td>
          <td>
            <ul>
            <li>Button
            </ul>
          </td>
          <td>
            <ul>
            <li>ATK_ROLE_PUSH_BUTTON
            </ul>
          </td>
          <td>
            <ul>
            <li>AXButton
            </ul>
          </td>
        </tr>
        <tr>
          <th>
            aria-pressed='true'<br/>(State)
          </th>
          <td>
            <ul>
            <li>Set the STATE_SYSTEM_PRESSED state.
            </ul>
          </td>
          <td>
            <ul>
            <li>If on a button (WAI-ARIA/HTML/XUL), expose the role as IA2_ROLE_TOGGLE_BUTTON.
            <li>Expose object attribute checkable="true"
            </ul>
          </td>
          <td>
            <ul>
            <li>Expose as ToggleState property of Toggle Control Pattern
            </ul>
          </td>
          <td>
            <ul>
            <li>If on a button (WAI-ARIA/HTML/XUL), expose the role as ATK_ROLE_TOGGLE_BUTTON.
            <li>Expose object attribute checkable="true"
            </ul>
          </td>
          <td>
            <ul>
            <li>none
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
